{extend name="base" /}
{block name="css"}
<style>
  footer {
    display: none;
  }

  .lui-nav {
    background-color: #f3f3f3;
    position: fixed;
    width: 100%;
    top: 60px;
    z-index: 10;
    height: 52px;
  }

  .lui-nav-left {
    color: #ff7340;
    font-size: 16px;
    font-weight: 600;
    float: left;
    position: relative;
    top: 15px;
    left: 10px;
  }

  .lui-nav-right {
    float: right;
    position: relative;
    right: 15px;
    top: 10px;
  }

  .lui-nav-rate {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    color: #25272c;
  }

  .lui-nav-rate .rate-text {
    font-size: 22px;
    color: #4782f6;
  }

  .lui-nav-dtk {
    display: inline-block;
    margin-left: 10px;
  }

  .lui-nav-dtk img {
    width: 22px;
    vertical-align: middle;
    transition: all .15s;
  }

  .lui-nav-dtk img:active {
    box-shadow: 0 0 1px 1px #ccc;
  }

  .lui-content {
    padding: 112px 0 103px;
  }

  .lui-exam-main {
    display: none;
  }

  .lui-exam-main.lui-active {
    display: block;
  }

  .lui-question-item {
    background-color: #fff;
    font-size: 16px;
    color: #25272c;
    line-height: 1.6;
    padding: 10px 15px 15px;
  }

  .lui-kulvar {
    height: 15px;
    background-color: #f3f3f3;
  }

  .lui-option-item {
    background-color: #fff;
    font-size: 16px;
    color: #25272c;
    line-height: 1.6;
    padding: 10px 15px 15px;
  }

  .lui-option-item div {
    margin: 0 0 8px;
  }

  .footer {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 1;
    bottom: 0;
  }

  .lui-support-text {
    text-align: center;
    height: 30px;
    line-height: 30px;
  }

  .lui-support-text span {
    font-size: 14px;
    color: #aaa;
    margin: 0 5px;
  }

  .lui-support-text .tel-text {
    color: #4782f6;
    text-decoration: none;
    font-size: 14px;
    margin: 0 5px;
  }

  .lui-select-main {
    border-top: 1px solid #edeff0;
  }

  .lui-select-item {
    display: inline-block;
    width: 25%;
    margin: 0 -3px 0 -2px;
    text-align: center;
    padding: 10px 0;
  }

  .lui-select-option {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 27px;
    background-color: #fff;
    color: #4782f6;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #4782f6;
    transition: all .2s;
  }

  .lui-select-option.lui-active {
    background-color: #4782f6;
    color: #fff;
  }

  .lui-select-option:active {
    background-color: #4782f6;
    color: #fff;
  }

  .lui-select-option.lui-active:active {
    background-color: #fff;
    color: #4782f6;
  }

  #dtk .lui-modal-content {
    position: relative;
    background-color: #fff;
    top: 112px;
    height: calc(100% - 252px);
    overflow-y: hidden;
    display: none;
  }

  .lui-modal-tuckup {
    position: absolute;
    width: 100%;
    bottom: 70px;
    text-align: center;
    display: none;
  }

  .lui-modal-tuckup img {
    width: 40px;
    position: relative;
    transition: all .15s;
  }

  .lui-modal-tuckup img:active {
    bottom: 1px;
  }

  .lui-exam-list {
    padding: 10px 0;
    position: relative;
    height: calc(100% - 105px);
    overflow-y: hidden;
  }

  .lui-exam-item {
    display: inline-block;
    width: 20%;
    margin: 0 -3px 0 -2px;
    text-align: center;
    padding: 10px 0;
  }

  .lui-exam-option {
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 21px;
    background-color: #fff;
    color: #4782f6;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #4782f6;
    transition: all .2s;
  }

  .lui-exam-option.lui-active {
    background-color: #4782f6;
    color: #fff;
  }

  .lui-exam-option:active {
    background-color: #4782f6;
    color: #fff;
  }

  .lui-exam-option.lui-active:active {
    background-color: #fff;
    color: #4782f6;
  }

  .submit-btn {
    width: calc(100% - 40px);
    margin: 20px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    background-image: -webkit-linear-gradient(to right, #47a2f6, #4782f6);
    background-image: linear-gradient(to right, #47a2f6, #4782f6);
    border-radius: 25px;
    transition: all .2s;
  }

  .submit-btn:active {
    box-shadow: 0 0 1px 1px #ccc;
  }

  .lui-question-item img {
    vertical-align: middle;
    max-width: 98% !important;
    height: auto !important;
  }

  .lui-option-item img {
    vertical-align: middle;
  }

  .lui-option-item p {
    display: inline-block;
    margin: 0;
  }

  .lui-question-item p {
    display: inline-block;
    margin: 0;
  }

  @media (max-width: 320px) {
    .lui-nav {
      top: 50px;
      height: 48px;
    }

    .lui-nav-left {
      font-size: 14px;
    }

    .lui-nav-rate {
      font-size: 16px;
    }

    .lui-nav-rate .rate-text {
      font-size: 20px;
    }

    .lui-nav-dtk img {
      width: 18px;
    }

    #dtk .lui-modal-content {
      top: 98px;
      height: calc(100% - 192px);
    }

    .lui-exam-item {
      margin: 0;
    }

    .lui-modal-tuckup img {
      width: 30px;
    }

    .lui-modal-tuckup {
      bottom: 40px;
    }

    .lui-content {
      padding-top: 98px;
      padding-bottom: 93px;
    }

    .lui-select-option {
      width: 40px;
      height: 40px;
      line-height: 40px;
    }
  }
</style>
{/block}
{block name="body"}
<div class="lui-nav">
  <div class="lui-nav-right">
    <div class="lui-nav-rate">
    </div>
  </div>
</div>


<div class="lui-content">
  <form method="post" action="{:url('index/Index/dealLogin')}" id="submituser" enctype="multipart/form-data">
    <div id="relation">
      <div class="lui-modal-content">
        <div class="lui-rel-title"></div>
        <div class="lui-input-main">
          <div class="lui-input-list">
            <div class="lui-input-list-left"></div>
            <div class="lui-input-list-right">
              <input name="usercode" class="lui-input" placeholder="请输入标识码"/>
            </div>
          </div>
        </div>
        <div class="lui-tips"></div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input class="lui-btn" type="submit" value="登陆"><a style="margin-left: 11%;color: #ff2222" href="{:url('index/Rank/scoreRank')}">积分排行</a>
      </div>
    </div>
  </form>
</div>

<div class="footer">
  <div class="lui-support-text"><span>软云科技</span></div>
</div>
<input type="hidden" value="{$data.examinations_id}" id="examinations_id">
{/block}
{block name="js"}

{/block}
{block name="script"}
<script>
  var winW = $(window).width();
  var winH = $(window).height();
  var keyList = {};

  $(function(){
    //获取球队选项框中的值-------------
    $.ajax({
      url     : "{:url('index/Index/getData')}",
      type    : "post",
      dataType: "json",
      cache   : false,
      data    : {
        name: 'sjb'
      },
      success : function(data){
        // $.hideLading();
        if(data.status == 1){
          //数据集
          var teams = data.info;
          var length = data.len;
          $(function(){
            bindSelect(teams, length);
            var id = $("#teamSelect").val();
            var teamss = teams[id];
            //console.log(teamss.teamB);
            var html1 = '<input type="radio" name="teams" value="' + teamss.teamA + '">' + teamss.teamA;
            var html2 = '<input type="radio" name="teams" value="' + teamss.teamB + '" checked>' + teamss.teamB;
            $("#teamsinfo").html(html1 + html2);
          });
        }else{
          alert('网络错误~~！');
        }
      }
    });
    //将数据集绑定select
    bindSelect = function(teams, length){
      var $teamSelect = $('#teamSelect');
      $teamSelect.change(function(){
        var id = $(this).val();
        var teamss = teams[id];
        var html1 = '<input id="teams" type="radio" name="teams" value="' + teamss.teamA + '">' + teamss.teamA;
        var html2 = '<input id="teams" type="radio" name="teams" value="' + teamss.teamB + '" checked>' + teamss.teamB;
        $("#teamsinfo").html(html1 + html2);

      });

      if(length > 0){
        for(var i = 1; i <= length; i++){
          var item = teams[i];
          $teamSelect.append('<option value="' + item.id + '" selected>' + item.teamA + 'VS' + item.teamB + '</option>');
        }
      }
    };
    //获取球队选项框中的值----------------------
    //提交结果
    sumbitData = function(){
      var teamres = $("input[name='teams']:checked").val();
      $.ajax({
        url     : "{:url('index/Index/receiveData')}",
        type    : "post",
        dataType: "json",
        cache   : false,
        data    : {
          name  : 'sjb',
          result: teamres
        },
        success : function(data){

          if(data.status == 1){
            alert('提交成功！');
          }else{
            alert('网络错误~~！');
          }
        }
      });
    }

  })


</script>
{include file="weixin" /}
{/block}